
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网桥信息管理</title>
    <!-- <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../css/global.css" rel="stylesheet">
    <!--<link href="../css/bootstrap-dialog.min.css" rel="stylesheet">-->
</head>

<body>
	<!--1.0 narbar -->
    <div   class="fixedNavbar">
       <#include "../navbar.html">
	</div>

    <div class="container-fluid">
    	<!--2.0 left sidebar -->
        <div class="row">
            <#include "../sidebar.html">

            <!--2.1 main content -->
            <div class="col-md-10">
		            <ul id="myTab" class="nav nav-tabs" role="tablist">
		                <li class="active"><a href="#box-manage" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-globe"></i>&nbsp;在线用户管理</a>
		                </li>
		            </ul>
		            <div id="myTabContent" class="tab-content" style="margin-top:10px;">
		                <div class="tab-pane active" id="box-manage">
		                    <div class="panel panel-default" id="purchasersList">
		                        <div class="panel-heading">
		                            <form class="form-inline" role="form">
		                                <div class="form-group">
		                                  <label for="companyName" class="control-label">用户姓名</label>
		                                  <input type="text" class="form-control" id="companyName" placeholder="用户企业">
		                                </div>
                                        <div class="form-group">
                                          <label for="boxId" class="control-label">网桥ID</label>
                                          <input type="text" class="form-control" id="boxId" placeholder="网桥ID">
                                        </div>
		                                <button type="submit" class="btn btn-primary">查询</button>
		                            </form>
		                        </div>
		                    </div>
		                </div>
		            </div>

		            <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>网桥ID</th>
                                <th>上线时间</th>
                                <!-- <th>已上线时间</th> -->
                                <th>IP地址</th>
                                <th>网桥测速</th>
                                <th>Ping</th>
                            </tr>
                        </thead>
                        <tbody id="dataList">
                            <tr>
                                <td>广州NOC科技有限公司</td>
                                <td>4008-1023</td>
                                <td>2015-03-30 00:00:00</td>
                                <!-- <td>02:42:00</td> -->
                                <td>192.168.69.65</td>
                                <td style="text-align:center;">
                                	<a href="#" class="speedtest-box">开始测速</a>&nbsp;&nbsp;
                                </td>
                                <td style="text-align:center;">
                                	<a href="#" class="ping-box">ping</a>&nbsp;&nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td>广州雄志科技有限公司</td>
                                <td>4008-1025</td>
                                <td>2017-03-30 00:00:00</td>
                                <!-- <td>03:42:00</td> -->
                                <td>192.168.69.67</td>
                                <td style="text-align:center;">
                                	<a href="#" class="speedtest-box">开始测速</a>&nbsp;&nbsp;
                                </td>
                                <td style="text-align:center;">
                                	<a href="#" class="ping-box">ping</a>&nbsp;&nbsp;
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <nav>
					  	<div class="row" style="text-align:center">
		                    <ul id="example" class="pagination">
		                    </ul>
		                </div>
					</nav>

            </div>
        </div>
    </div>
    
    <script src="../js/bootstrap/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script src="../js/bootstrap-paginator.js"></script>
    <script src="../js/_x_ctr_location-1.0.min.js"></script>
    <script src="../js/jquery.iframe-transport.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/WdatePicker.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/common/pageConfig.js?v=12312432"></script>
    <script src="../js/common/pageUtil.js"></script>
	<script src="../js/util.js"></script>
	<script src="../js/sha1.js"></script>
	<script src="../js/bootstrap-dialog.min.js"></script>
    
    <script>
        $(function(){
        	//加载数据
        	var params= {
       			pageNo:Page.getConstant('PAGE_NO'),
       			pageSize:Page.getConstant('PAGE_SIZE'),
        	};
        	loadData(params);
            
            //处理测速按钮事件
            $("#dataList").on("click",".speedtest-box",function(){
            	var url = "/eoip/web/speedTest";
            	var params= {
            		ip: $(this).parent().prevAll(".ip").html(),
            		boxId: $(this).parent().prevAll(".boxId").html()
            	};
            	$speedTestBtn = $(this).html("测速中..").removeClass("btn-danger").addClass("btn-success");
            	common.post(url, params, function(data){
            		data = jQuery.parseJSON(data);
            		$speedTestBtn.html("开始测速");
            		var message = (data.code == 1 ? data.report : data.info);
            		//show result
           			BootstrapDialog.show({
           	            title: '<font color="green' + '">ping结果</font>',
           	            message: message,
           	            buttons: [{
           	                label: '知道了',
           	                action: function(dialog) {
           	                    dialog.close();
           	                }
           	            }]
           	    });
            	});
            });
            
            //处理ping按钮事件
            $("#dataList").on("click",".ping-box",function(){
            	var url = "/eoip/web/pingHost";
            	var params= {
            		ip: $(this).parent().prevAll(".ip").html(),
            		boxId: $(this).parent().prevAll(".boxId").html()
            	};
            	
            	$pingHostBtn = $(this).html("正在发送ping包..").removeClass("btn-danger").addClass("btn-success");
            	common.post(url, params, function(data){
            		data = jQuery.parseJSON(data);
            		$pingHostBtn.html("ping");
            		var message = data.code == 1 ? ( data.timecost>=0?("ping时间: "+data.timecost+"ms"):"该网桥不可达" ) : data.info;
            		//show result
           			BootstrapDialog.show({
           	            title: '<font color="green' + '">ping结果</font>',
           	            message: '<font color="blue" size="12px;">' + message + '</font>',
           	            buttons: [{
           	                label: '知道了',
           	                action: function(dialog) {
           	                    dialog.close();
           	                }
           	            }]
           	    });
            		if(data.timecost<0) $pingHostBtn.removeClass("btn-success").addClass("btn-danger");
            	});
            });
        });//$.ready
        
        
      	//分页插件options
    	var options = {
		  	bootstrapMajorVersion: 3, //版本
            currentPage: Page.getConstant('PAGE_NO'), //当前页数
            totalPages: Page.getConstant('PAGE_SIZE'), //总页数
            itemTexts: function (type, page, current) {
              switch (type) {
                case "first":
                  return "首页";
                case "prev":
                  return "上一页";
                case "next":
                  return "下一页";
                case "last":
                  return "末页";
                case "page":
                  return page;
              }
            },//点击事件，用于通过Ajax来刷新整个list列表
            onPageChanged:onPageChanged
        };//end option
        
        function onPageChanged(event, oldPage, newPage){
        	loadData({
    			pageNo:newPage,
    			pageSize:Page.getConstant('PAGE_SIZE'),
    		});
        }
        
        function fillData(data){
        	$.each(data,function(index,item){
        		var html="";
        		html=html+
        			'<tr >'+
            			'<td>'+item.organization.companyName+'</td>'+
            			'<td class="boxId">'+item.boxId+'</td>'+
            			'<td>'+ item.createTime + '</td>'+ //最近上线时间
            			//'<td>'+item.createTime+'</td>'+ //上线时长
            			'<td class="ip">'+item.ip+'</td>'+ //ip地址
            			'<td style="text-align:center;">' + 
            				'<a href="#"' +  'class="speedtest-box btn btn-danger btn-xs">开始测速</a>&nbsp;&nbsp;'+
            				'</td>' + 
            			'<td style="text-align:center;">' + 
            				'<a href="#"' +  'class="ping-box btn btn-danger btn-xs">ping</a>&nbsp;&nbsp;'+
            				'</td>' +	
        			'</tr>';
        			$("#dataList").append(html);
			});
        }
        
        function loadData(params){
        	$("#dataList").empty();
            common.post('/eoip/web/getBoxListByPage',params,function(data){
            	   data = $.parseJSON(data);
             	   var pageCount = data.totalPage;
         		   var currentPage = data.pageNo;
         		   
         		   options.currentPage=currentPage;
         		   options.totalPages=pageCount;
         		   
         		   fillData(data.dataList);
         	       $('#example').bootstrapPaginator(options);
             });
        }//end loadData
    </script>
</body>
</html>
